import React, { useState, useRef } from 'react'
/* 
useRef的作用
  1. 帮助存储查找标签对象
  2. 帮助存储查找自定义数据

利用ref存储查找标签
  1. 创建一个ref容器: useRef
  2. 将ref容器交给要存储查找的标签:  ref={ref容器}
  3. 通过ref容器得到标签: ref容器对象.current
利用ref存储查找自定义数据
  1.1. 创建ref容器: const myRef = useRef(初始值)
  1.2. 存储数据: myRef.current = 数据
  1.3. 读取数据: myRef.current

*/
// const [msg4, setMsg4] = useState('ccc')  // 不能在组件函数外部调用hook
export default function RefTest() {

  const [msg, setMsg] = useState('abc')
  const [msg3, setMsg3] = useState('aaa')

  // let flag = true
  // if (flag) {
  //   const [msg2, setMsg2] = useState('cba') // 不能在if/for/while中调用hook
  // }
  

  /* 1. 创建一个ref容器: useRef */
  const inputRef = useRef()

  /* 1.1. 创建ref容器: const myRef = useRef(初始值) */
  const msgRef = useRef('atguigu')


  const handleClick = () => {
    // 得到input
    /* 3. 通过ref容器得到标签: ref容器对象.current */
    const input = inputRef.current
    // 提示其value
    alert(input.value)
  }
  return (
    <div>
      {/* 2. 将ref容器交给要存储查找的标签 => React就会自动将标签对象保存到ref对象的current属性上 */}
      <input type="text" ref={inputRef}/><br/>
      <button onClick={handleClick}>提示输入</button>
      <br/>
      <button onClick={() => {
        msgRef.current = 'abc'
      }}>保存msg</button>
      <button onClick={() => {
        alert(msgRef.current)
      }}>读取msg</button>
    </div>
  )
}
